/* 超出显示滚动条 */
.overflow,.overflow-auto{
    overflow: auto;
    /* 针对IOS */
    -webkit-overflow-scrolling: touch;
}
.overflow-hidden{
    overflow: hidden;
}
.hide{
    display: none;
}
/* 常用边框样式 */

.bdr(@color:@border-color; @border-radius:0) {
    position: relative;
    &:before {
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        display: block;
        width: 200%;
        height: 200%;
        border: 1px solid @color;
        border-radius: @border-radius;
        -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scale(0.5, 0.5);
        -ms-transform: scale(0.5, 0.5);
                transform: scale(0.5, 0.5);
        z-index: 1;
    }
}

.bdr-r(@color: @border-color) {
    position: relative;
    &:after {
        position: absolute;
        top: 0;
        right: 0;
        content: '';
        display: block;
        height: 100%;
        width: 1px;
        background: @color;
        -webkit-transform: scaleX(0.5);
        -ms-transform: scaleX(0.5);
        transform: scaleX(0.5);
        z-index: 1;
    }
}
.bdr-l(@color: @border-color) {
    position: relative;
    &:before {
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        display: block;
        height: 100%;
        width: 1px;
        background: @color;
        -webkit-transform: scaleX(0.5);
        -ms-transform: scaleX(0.5);
        transform: scaleX(0.5);
        z-index: 1;
    }
}
.bdr-b(@color: @border-color) {
    position: relative;
    &:after {
        position: absolute;
        bottom: 0;
        left: 0;
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        background: @color;
        -webkit-transform: scaleY(0.5);
        -ms-transform: scaleY(0.5);
        transform: scaleY(0.5);
        z-index: 1;
    }
}
.bdr-t(@color: @border-color) {
    position: relative;
    &:before {
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        background: @color;
        -webkit-transform: scaleY(0.5);
        -ms-transform: scaleY(0.5);
        transform: scaleY(0.5);
        z-index: 1;
    }
}
.border{
    .bdr(@border-color);
}
.border-r{
    .bdr-r(@border-color);
}
.border-l{
    .bdr-l(@border-color);
}
.border-t{
    .bdr-t(@border-color);
}
.border-b{
    .bdr-b(@border-color);
}

/* 常用字号 */
.font-10{font-size:@size-10 !important;}
.font-12{font-size:@size-12 !important;}
.font-14{font-size:@size-14 !important;}
.font-16{font-size:@size-16 !important;}
.font-18{font-size:@size-18 !important;}
.font-20{font-size:@size-20 !important;}
.font-22{font-size:@size-22 !important;}
.font-24{font-size:@size-24 !important;}
.font-26{font-size:@size-26 !important;}
.font-28{font-size:@size-28 !important;}
.font-32{font-size:@size-32 !important;}
.font-36{font-size:@size-36 !important;}
.font-48{font-size:@size-48 !important;}
.font-56{font-size:@size-56 !important;}
.font-64{font-size:@size-64 !important;}
.font-72{font-size:@size-72 !important;}


/* 常用宽度 */
.w100p{width:100%!important;}
.min-w100p{min-width: 100%!important;}
.w10{width: 10px!important;}
.w15{width: 15px!important;}
.w20{width: 20px!important;}
.w24{width: 24px!important;}
.w30{width: 30px!important;}
.w32{width: 32px!important;}
.w40{width: 40px!important;}
.w44{width: 44px!important;}
.w60{width: 60px!important;}
.w70{width: 70px!important;}
.w80{width: 80px!important;}
.w100{width: 100px!important;}
.w140{width: 140px!important;}

/* 常用高度 */
.h100p{height:100%!important;}
.min-h100p{min-height: 100%!important;}
.h10{height: 10px!important;}
.h15{height: 15px!important;}
.h20{height: 20px!important;}
.h24{height: 24px!important;}
.h30{height: 30px!important;}
.h32{height: 32px!important;}
.h40{height: 40px!important;}
.h44{height: 44px!important;}
.h100{height: 100px!important;}
.h120{height: 120px!important;}
.h240{height: 240px!important;}

/* 常用间距 */
/*----------间距-----------*/
[m-padding='0 0 0 0'],
[m-padding='0'] {
    padding: 0 0 0 0 !important;
}

[m-padding='1 0 0 0'] {
    padding: 0.25rem 0 0 0 !important;
}

[m-padding='0 1 0 0'] {
    padding: 0 0.25rem 0 0 !important;
}

[m-padding='0 0 1 0'] {
    padding: 0 0 0.25rem 0 !important;
}

[m-padding='0 0 0 1'] {
    padding: 0 0 0 0.25rem !important;
}

[m-padding='1 1 0 0'] {
    padding: 0.25rem 0.25rem 0 0 !important;
}

[m-padding='1 0 1 0'] {
    padding: 0.25rem 0 0.25rem 0 !important;
}

[m-padding='1 0 0 1'] {
    padding: 0.25rem 0 0 0.25rem !important;
}

[m-padding='0 1 0 1'] {
    padding: 0 0.25rem 0 0.25rem !important;
}

[m-padding='0 1 1 0'] {
    padding: 0 0.25rem 0.25rem 0 !important;
}

[m-padding='0 0 1 1'] {
    padding: 0 0 0.25rem 0.25rem !important;
}

[m-padding='1 1 1 0'] {
    padding: 0.25rem 0.25rem 0.25rem 0 !important;
}

[m-padding='1 1 0 1'] {
    padding: 0.25rem 0.25rem 0 0.25rem !important;
}

[m-padding='1 0 1 1'] {
    padding: 0.25rem 0 0.25rem 0.25rem !important;
}

[m-padding='0 1 1 1'] {
    padding: 0 0.25rem 0.25rem 0.25rem !important;
}

[m-padding='1 1 1 1'] {
    padding: 0.25rem !important;
}

[m-margin='0 0 0 0'],
[m-margin='0'] {
    margin: 0 0 0 0 !important;
}

[m-margin='1 0 0 0'] {
    margin: 0.25rem 0 0 0 !important;
}

[m-margin='0 1 0 0'] {
    margin: 0 0.25rem 0 0 !important;
}

[m-margin='0 0 1 0'] {
    margin: 0 0 0.25rem 0 !important;
}

[m-margin='0 0 0 1'] {
    margin: 0 0 0 0.25rem !important;
}

[m-margin='1 1 0 0'] {
    margin: 0.25rem 0.25rem 0 0 !important;
}

[m-margin='1 0 1 0'] {
    margin: 0.25rem 0 0.25rem 0 !important;
}

[m-margin='1 0 0 1'] {
    margin: 0.25rem 0 0 0.25rem !important;
}

[m-margin='0 1 0 1'] {
    margin: 0 0.25rem 0 0.25rem !important;
}

[m-margin='0 1 1 0'] {
    margin: 0 0.25rem 0.25rem 0 !important;
}

[m-margin='0 0 1 1'] {
    margin: 0 0 0.25rem 0.25rem !important;
}

[m-margin='1 1 1 0'] {
    margin: 0.25rem 0.25rem 0.25rem 0 !important;
}

[m-margin='1 1 0 1'] {
    margin: 0.25rem 0.25rem 0 0.25rem !important;
}

[m-margin='1 0 1 1'] {
    margin: 0.25rem 0 0.25rem 0.25rem !important;
}

[m-margin='0 1 1 1'] {
    margin: 0 0.25rem 0.25rem 0.25rem !important;
}

[m-margin='1 1 1 1'] {
    margin: 0.25rem !important;
}

.padding-5{padding:5px!important;}
.padding-l-5{padding-left:5px!important;}
.padding-r-5{padding-right: 5px!important;}
.padding-t-5{padding-top: 5px!important;}
.padding-b-5{padding-bottom: 5px!important;}

.padding-10{padding:10px!important;}
.padding-l-10{padding-left:10px!important;}
.padding-r-10{padding-right: 10px!important;}
.padding-t-10{padding-top: 10px!important;}
.padding-b-10{padding-bottom: 10px!important;}

.padding-15{padding: 15px!important;}
.padding-l-15{padding-left:15px!important;}
.padding-r-15{padding-right: 15px!important;}
.padding-t-15{padding-top: 15px!important;}
.padding-b-15{padding-bottom: 15px!important;}

.padding-20{padding: 1rem!important;}
.padding-l-20{padding-left:1rem!important;}
.padding-r-20{padding-right: 1rem!important;}
.padding-t-20{padding-top: 1rem!important;}
.padding-b-20{padding-bottom: 1rem!important;}

.margin-5{margin:5px!important;}
.margin-l-5{margin-left:5px!important;}
.margin-r-5{margin-right: 5px!important;}
.margin-t-5{margin-top: 5px!important;}
.margin-b-5{margin-bottom: 5px!important;}

.margin-10{margin:10px!important;}
.margin-l-10{margin-left:10px!important;}
.margin-r-10{margin-right: 10px!important;}
.margin-t-10{margin-top: 10px!important;}
.margin-b-10{margin-bottom: 10px!important;}

.margin-15{margin: 15px!important;}
.margin-l-15{margin-left:15px!important;}
.margin-r-15{margin-right: 15px!important;}
.margin-t-15{margin-top: 15px!important;}
.margin-b-15{margin-bottom: 15px!important;}

/* 常用字体颜色 */
.color-light{color:#999!important}